<template>
  <el-input
    :readonly="service.readonly"
    :modelValue="val"
    @update:modelValue="updateValue($event)"
    :size="ui.size"
    :placeholder="service.placeholder || ''"
    :show-password="ui.showPassword"
    :disabled="ui.disabled"
    :clearable="ui.clearable"
    :maxlength="ui.maxLength"
    :showWordLimit="!!ui.maxLength"
  >
    <template v-if="ui.prefixIcon && textFix(ui.prefixIcon)" #prepend>{{
      ui.prefixIcon
    }}</template>
    <template v-else-if="ui.prefixIcon && !textFix(ui.prefixIcon)" #prepend>
      <el-button :icon="ui.prefixIcon"
    /></template>

    <template v-if="ui.suffixicon && textFix(ui.suffixicon)" #append>{{
      ui.suffixicon
    }}</template>
    <template v-else-if="ui.suffixicon && !textFix(ui.suffixicon)" #append>
      <el-button :icon="ui.suffixicon"
    /></template>
  </el-input>
</template>

<script lang="ts" setup name="lc-sf-input">
import { computed, inject } from "vue";
import { InputUI } from "../interface";
import { SFService } from "../sf.service";
import { TItemOption } from "../type";
const props = defineProps<TItemOption<InputUI>>();
const sf = inject<SFService>("sf-service");
const val = computed(() => {
  return sf.getVaule(props.keyPath);
});
const ui = props.service.getUI<InputUI>();
const textFix = (key: unknown) => {
  return typeof key === "string";
};
const updateValue = (val: string) => {
  if (ui.change) {
    ui.change(val);
  }
  sf.setVaule(props.keyPath, val);
};
</script>

<style></style>
../types
